<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/fontawesome-free-5.7.2-web/css/all.css">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../css/jquery.mobile.ui.css">
    <link rel="stylesheet" href="../css/jqm-ui-demos.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js"></script>
  </head>
  <body>

    <div data-role="page" data-theme="a">
      <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
        <div class="nav">
          <a data-ajax="false" href="../menus.html" class="nav-link back">首页</a>
          <h3 class="nav-title">Card</h3>
        </div>
      </div>
      <div role="main" class="ui-content">

        <div class="demo">
          <div class="card">
            <div class="card-content">
              <p><i class="far fa-info-circle grey"></i> 卡片是一种非常常用的组件，移动端的内容大多数都是以卡片的形式呈现，因此你应该好好了解卡片的使用原则。</p>
              <p><a data-ajax="false" data-role="none" href="example1.html" class="btn btn-sm btn-hollow btn-square blue">卡片布局的例子</a></p>
            </div>
          </div>

        </div>

        <div class="demo">
          <h5>普通卡片</h5>
          <div class="card">
            <div class="card-content">
              <p>这是一个普通的卡片，普通卡片没有卡头和卡尾。没有丰富信息，只是一些简单文本的展示。</p>
            </div>
          </div>
        </div>

        <div class="demo">
          <h5>带卡头和卡尾的卡片</h5>
          <div class="card">
            <div class="card-header">
              <h3>卡片头</h3>
            </div>
            <div class="card-content">
              <p>这是一个带卡头和卡尾的卡片</p>
              <p>这是最常用的卡片之一</p>
            </div>
            <div class="card-footer">
              <p>卡片尾 by: xpzheng</p>
            </div>
          </div>
        </div>

        <div class="demo">
          <h5>带图片的卡片 - 可用于显示丰富信息</h5>
          <div class="card">
            <div class="card-header card-header-pic" style="background-image: url('../images/card.jpg'); height: 30vw;">
              <h3 class="white">你要的全拿走</h3>
            </div>
            <div class="card-content">
              <p class="color-grey">2019-01-15 14:46</p>
              <p>你要的全拿走 把回忆化成空</p>
              <p>不要在乎感受 体面的有所保留 说过的话当赠品附送</p>
              <p>我不必再为你迁就 说一句分手借口 一遍两遍三遍 最后百口莫辩</p>
            </div>
            <div class="card-footer">
              <p>胡彦斌</p>
            </div>
          </div>
        </div>

        <div class="demo">
          <h5>一个社交相关的例子</h5>
          <div class="card">
            <div class="card-header">
              <div class="item-content">
                <div class="item-media"><img src="../images/avatar.jpg" style="width: 42px; height: 42px; border-radius: 3px;"></div>
                <div class="item-inner">
                  <div style="margin-left: 10px;">
                    <h5 style="margin: 0;">王老六</h5>
                    <p style="margin: 0;">2018-12-16 12:45</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-content">
              <img src="../images/tour.jpg" style="width: 100%;">
              <p>旅行，是一场修行</p>
              <p>努力使自己变得更好，加油！</p>
            </div>
            <div class="card-footer"> -- 我可以跟在你身后，像影子追着光梦游</div>
          </div>
        </div>

        <div class="demo">
          <h5>卡片组</h5>
          <ul class="card-list">
            <div class="card">
              <div class="card-header">
                <h3>卡片头</h3>
              </div>
              <div class="card-content">
                <p>这是一个带卡头和卡尾的卡片</p>
                <p>这是最常用的卡片之一</p>
              </div>
              <div class="card-footer">
                <p>卡片尾 by: xpzheng</p>
              </div>
            </div>
            <div class="card">
              <div class="card-header">
                <h3>卡片头</h3>
              </div>
              <div class="card-content">
                <p>这是一个带卡头和卡尾的卡片</p>
                <p>这是最常用的卡片之一</p>
              </div>
              <div class="card-footer">
                <p>卡片尾 by: xpzheng</p>
              </div>
            </div>
            <div class="card">
              <div class="card-header">
                <h3>卡片头</h3>
              </div>
              <div class="card-content">
                <p>这是一个带卡头和卡尾的卡片</p>
                <p>这是最常用的卡片之一</p>
              </div>
              <div class="card-footer">
                <p>卡片尾 by: xpzheng</p>
              </div>
            </div>
          </ul>
        </div>
          
      </div>
    </div>

  </body>
</html>